<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				height:4000px;
			}
			a{
				text-decoration: none;
				font-size:15px;
				color:black
			}
			#a1{
				color:red;
			}
			#d1{
				width:100%;
				background-color:lightgray;

			}
			#d2{
				position: absolute;
				left:100px;
			}
			#d3{
				position: absolute;
				top:40px;
				left:210px;
				
			}
			#searc{
				width: 580px;
				border: 1px solid red;
				border-radius: 15px;
				height: 30px;
				font-size: 20px;
			}
			
		</style>
		<script type="text/javascript">
			window.onscroll=function(){
				// 元素滚动条的垂直距离
				var d=document.documentElement.scrollTop;
				//元素上边界到它上级元素的上边界的距离
				var h=document.getElementById("searc").offsetTop;
				var s = document.getElementById("d3");
				var p= document.getElementsByName("img");
				let st=document.getElementById("d2");
				if(d>h+30){
					st.style.position="fixed";
					st.style.top="3px";
					st.style.left="100px";
					// 图片尺寸未生效
					p.style.width="100px;"
				}else{
					st.style.position="absolute";
					st.style.top="40px";
					st.style.left="100px";
					s.style.top="40px";
				}
			
			}
		</script>
	</head>
	<body>
		<div id="d1">
			<select id="sele">
				<option value ="1">中国大陆</option>
				<option value ="2">中国香港</option>
			</select>
			<a href="#" id="a1">亲，请登录</a>
			<a href="#">免费注册</a>&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="#">手机逛淘宝</a>	
		</div>
		<div id="d2">
			<a href="https://www.taobao.com"><img src="images/tb.png" id="p"></a>
			<form action="s.taobao.com/search" method="post" id="d3">
				<input type="search" name="tb" id="searc"  />
			</form>
		</div>
	</body>
</html>